<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航条</title>

<link href="css/style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

	$("#menu2 li a").wrapInner( '<span class="out"></span>' );
	
	$("#menu2 li a").each(function() {
		$( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );
	});

	$("#menu2 li a").hover(function() {
		$(".out",	this).stop().animate({'top':	'48px'},	300); // move down - hide
		$(".over",	this).stop().animate({'top':	'0px'},		300); // move down - show

	}, function() {
		$(".out",	this).stop().animate({'top':	'0px'},		300); // move up - show
		$(".over",	this).stop().animate({'top':	'-48px'},	300); // move up - hide
	});

});
</script>

</head>
<body>

<!-- 代码 开始 -->
<div id="menu2" class="menu"><div style="float:right;">
	<ul>
	<li><a href="#">首 页</a></li>
	<li><a href="#">预报预警</a></li>
	<li><a href="#">气象新闻</a></li>
	<li><a href="#">气象服务</a></li>
	<li><a href="#">行政审批</a></li> 
	</ul></div><div style="float:left;"><span>海科任务督办管理系统</span></div>
	<div class="cls"></div>
</div>
<!-- 代码 结束 -->

</body>
</html>